<template>
	<view class="goods">
		<good-list :goods="goods"></good-list>
		<view class="isOver" v-if="isOver">-------我是有底线的--------</view>		
	</view>
</template>

<script>
	import goodList from "../../components/goods-list.vue"
	export default {
		data() {
			return {
				pageIndex:1,
				totalPages:1, //
				isOver:false,
				goods:[],
			}
		},
		components:{goodList},
		onLoad() {
			this.getGoodList()
		},
		methods: {
			async getGoodList(callback){
				const res = await this.$myRequest({
					url:"/goods/search?query=&cid=10&pagenum="+this.pageIndex+"&pagesize=10"
				})
				//计算总页数
				const { total } = res.data.message;			
				this.totalPages = Math.ceil(total / 10); 
				this.goods.push(...res.data.message.goods);
				callback && callback()
			}
		},
		onReachBottom() {//触底
			if (this.pageIndex>=this.totalPages || 
			this.goods.length< this.pageIndex*10){
				uni.showToast({
				  title: '没有下一页数据',
				})
				this.isOver = true
			}else{
				this.pageIndex++;
				this.getGoodList();
			}
		},
		onPullDownRefresh() {//下拉刷新 重置
			this.pageIndex = 1;
			this.goods=[];
			this.isOver = false;			
			this.getGoodList(function(){				
				uni.stopPullDownRefresh()
			})		
			uni.hideLoading()
		}
	}
</script>

<style lang="scss">
	.goods{
		background-color: #eee;
	}
	.isOver{
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		font-size: 28rpx;
	}
</style>
